<!--  -->
<template>
  <div class="container">
    <div class="slide-wrapper" ref="verticalSlide">
      <div class="slide-content">
        <div class="slide-item" v-for="item of nums" :key="item">
          page-{{ item }}
        </div>
        <div class="slide-horizontal" ref="horizontalSlide">
          <div class="slide-horizonta-content">
            <div class="hori-item" v-for="item of nums" :key="item">
              horizontal scroll-{{ item }}
            </div>
          </div>
          <div class="dots-wrapper horizontal">
            <span
              class="dot"
              v-for="num in nums"
              :key="num"
              :class="{ active: horizontalCurIdx === num - 1 }"
            ></span>
          </div>
        </div>
      </div>
      <div class="dots-wrapper vertical">
        <span
          class="dot"
          v-for="num in nums + 1"
          :key="num"
          :class="{ active: verticalCurIdx === num - 1 }"
        ></span>
      </div>
    </div>
  </div>
</template>

<script>
import BScroll from "@better-scroll/core";
import Slide from "@better-scroll/slide";
import NestedScroll from "@better-scroll/nested-scroll";
BScroll.use(NestedScroll);
BScroll.use(Slide);

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      nums: 4,
      horizontalCurIdx: 0,
      verticalCurIdx: 0,
    };
  },
  //方法集合
  methods: {
    slideVerticalInit() {
      this.slideVertical = new BScroll(this.$refs.verticalSlide, {
        scrollX: false,
        scrollY: true,
        slide: {
          autoplay: false,
        },
        momentum: false,
        bounce: false,
        probeType: 3,
        nestedScroll: {
          groupId: "slide-demo", // string or number
        },
        click: true,
      });
      this.slideVertical.on("slideWillChange", ({ pageY }) => {
        console.log(pageY);
        this.verticalCurIdx = pageY;
      });
      this.slideVertical.on("slidePageChanged", (page) => {
        console.log(page);
      });
    },
    slideHorizontalInit() {
      this.slideHorizontal = new BScroll(this.$refs.horizontalSlide, {
        scrollX: true,
        scrollY: false,
        slide: true,
        momentum: false,
        bounce: false,
        probeType: 3,
        nestedScroll: {
          groupId: "slide-demo", // string or number
        },
        click: true,
      });
      this.slideHorizontal.on("slideWillChange", ({ pageX }) => {
        console.log(pageX);
        this.horizontalCurIdx = pageX;
      });
      this.slideHorizontal.on("slidePageChanged", (page) => {
        console.log(page);
      });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.slideVerticalInit();
    this.slideHorizontalInit();
  },
  beforeDestroy() {
    this.slideHorizontal.destroy();
    this.slideVertical.destroy();
  }, //生命周期 - 销毁之前
};
</script>
<style lang='scss' scoped>
.container {
  h2 {
    padding: 0 20px;
    font-size: 16px;
    margin-bottom: 10px;
  }
  .slide-wrapper {
    width: 100vw;
    height: 100vh;
    position: relative;
    overflow: hidden;
    .slide-content {
      height: 100%;
      display: flex;
      flex-flow: column wrap;
    }
    .slide-item {
      width: 100vw;
      height: 100vh;
      background-color: rgb(90, 173, 221);
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      &:nth-child(2) {
        background-color: rgb(23, 156, 29);
      }
      &:nth-child(3) {
        background-color: rgb(143, 156, 23);
      }
      &:nth-child(4) {
        background-color: rgb(190, 62, 22);
      }
    }
    .slide-horizontal {
      width: 100%;
      background-color: #000;
      overflow: hidden;
      position: relative;
      .slide-horizonta-content {
        height: 60vh;
        background-color: #fff;
        display: flex;
        flex-wrap: wrap;
        position: absolute;
        top: 50%;
        margin-top: -30vh;
        .hori-item {
          width: 100vh;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }
  }
}
.dots-wrapper {
  position: absolute;
  display: flex;
  &.vertical {
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    flex-flow: column wrap;
    .dot {
      margin: 3px 0;
      &.active {
        height: 20px;
      }
    }
  }
  &.horizontal {
    left: 50%;
    bottom: 8px;
    transform: translateX(-50%);
    flex-flow: row wrap;
    .dot {
      margin: 0 3px;
      &.active {
        width: 20px;
      }
    }
  }
  .dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #eee;
    transition: 0.275s;
    &.active {
      border-radius: 20px;
    }
  }
}
.btn-wrap {
  display: block;
  text-align: center;
  padding: 10px;
  button {
    margin: 0 5px;
  }
}
</style>